<template>
	<div class="box">
		<div class="box-top">
			<div class="box-left">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item
						><a href="/dashboard">首页</a></el-breadcrumb-item
					>
					<el-breadcrumb-item :to="this.$store.state.Fpath.url">{{
						this.$store.state.Fpath.name
					}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{
						this.$store.state.Zpath.name
					}}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="box-right">
				<el-button size="mini">退出登录</el-button>
			</div>
		</div>
		<div class="box-footer">
			<el-tag
				v-for="tag in tags"
				:key="tag.name"
				closable
				:type="tag.type"
				size="mini"
			>
				{{ tag.name }}
			</el-tag>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tags: [
				{ name: '标签一', type: '' },
				{ name: '标签二', type: 'success' },
				{ name: '标签三', type: 'info' },
				{ name: '标签四', type: 'warning' },
				{ name: '标签五', type: 'danger' },
			],
		}
	},
	created() {
		console.log(this.$store.state.Fpath.name, this.$store.state.Fpath.url)
		console.log(this.$store.state.Zpath.name, this.$store.state.Zpath.url)
	},
}
</script>

<style lang="less" scoped>
.box {
	width: 100%;
}
.box-top {
	position: relative;
	top: 0px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
}
.box-footer {
	position: relative;
	top: 1px;
}
</style>
